<template>
    <div>
        <el-card>
            <el-page-header @back="goBack" content="样本点">
            </el-page-header>
        </el-card>
        <el-card class="ivu-mt">
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="7">-->
<!--                    <el-input placeholder="请输入内容" size="small" class="input-with-select" clearable>-->
<!--                        <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--                    </el-input>-->
<!--                </el-col>-->
<!--            </el-row>-->
            <el-table :data="sampleList"
                      ref="table"
                      highlight-current-row
                      border
                      :row-class-name="tableRowClassName"
                      max-height="600"
                      style="width: 100%">
                <el-table-column
                        prop="name"
                        label="样本点名称">
                </el-table-column>
                <el-table-column
                        prop="project.title"
                        label="所属项目">
                </el-table-column>
                <el-table-column label="对应社区">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.communities.length === 1 ? 'success' : 'danger'">{{ scope.row.communities.length === 1 ? scope.row.communities[0].name : '暂未分配' }}</el-tag>
                        
                    </template>
                </el-table-column>
                <el-table-column label="对应项目指标">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.targets.length === 1 ? 'success' : 'danger'">{{ scope.row.targets.length === 1 ? scope.row.targets[0].name : '暂未分配' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!--v-has="'admin/save_allot_community'" -->
                        <el-tooltip effect="dark" content="分配"  placement="top" :enterable="false">
                            <el-button type="success" icon="el-icon-s-finance" size="mini"
                                       @click="allotCommunity(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="查看案件" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-picture" size="mini"
                                       @click="tableExpand(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" v-has="'admin/del_project'" size="mini" @click="delSample(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column type="expand" width="1">
                    <template slot-scope="props">
                        <el-table :data="props.row.children" stripe
                                  highlight-current-row
                                  border style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="ID">
                            </el-table-column>
                            <el-table-column
                                    prop="remark"
                                    label="备注">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="danger" v-has="'admin/check_img'" icon="el-icon-picture-outline" size="mini"
                                               @click="checkImage(scope.row.id)">查看图片
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[10, 20, 30, 40,50]"
                    :page-size="queryInfo.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

        <!--图片 -->
        <el-dialog
                title="图片查看"
                :visible.sync="ImgDialogVisible"
                width="50%">
            <span>
                <el-image :src="imgData.url"
                          :preview-src-list="imgData.srcList">
              </el-image>
            </span>
        </el-dialog>

        <!-- 分配社区 -->
        <el-dialog
                title="社区分配"
                :visible.sync="allotDialogVisible"
                @close="resetForm('allotRuleForm')"
                width="50%">
            <span>
                <el-form :model="allotForm" :rules="allotRules" ref="allotRuleForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="选择社区" prop="community_id">
                        <el-select v-model="allotForm.community_id" filterable clearable placeholder="请选择社区"
                                   style="width: 100%;">
                          <el-option v-for="(item,index) in selectTypeData" :key="index" :label="item.name"
                                     :value="item.id"></el-option>
                        </el-select>
                  </el-form-item>
                  <el-form-item label="项目指标" prop="project_target_id">
                        <el-select v-model="allotForm.project_target_id" filterable clearable placeholder="请选择项目指标"
                                   style="width: 100%;">
                          <el-option v-for="(item,index) in projectTargetData" :key="index" :label="item.name"
                                     :value="item.id"></el-option>
                        </el-select>
                  </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="resetForm('allotRuleForm')">取 消</el-button>
    <el-button size="small" type="primary" @click="saveAllot('allotRuleForm')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            sampleList: [],
            queryInfo: {
                project_id: 0,
                limit: this.$global_limit,
                page: this.$global_page
            },
            total: 0,
            ImgDialogVisible: false,
            allotDialogVisible: false,
            imgData: [],
            allotForm: {
                sample_id: 0, //样本点id
                community_id: '', //社区id
                project_target_id:'',
            },
            allotRules: {
                community_id: [
                    {required: true, message: '请选择社区', trigger: 'change'}
                ],
                project_target_id: [
                    {required: true, message: '请选择项目指标', trigger: 'change'}
                ],
            },
            selectTypeData: [],
            projectTargetData:[]
        }
    },
    created() {
        this.queryInfo.project_id = sessionStorage.getItem('new_project_id')
        this.getSampleList()
        this.getSelectTypeList()
        this.getProjectTargetList()
    },
    methods: {
        //分配社区读取select
        async getSelectTypeList() {
            const {data: res} = await this.$http.get('admin/get_select_type')
            if (res.code !== 200) return this.$message.error('获取社区列表失败')
            this.selectTypeData = res.data.list
        },

        //项目指标读取select
        async getProjectTargetList() {
            const {data: res} = await this.$http.get('admin/get_project_target_type')
            if (res.code !== 200) return this.$message.error('获取社区列表失败')
            this.projectTargetData = res.data.list
        },

        //表明该行处于某种状态
        tableRowClassName({row}) {
            if (row.children.length === 0) {
                return 'warning-row';
            } else {
                return '';
            }
        },
        //数据源
        async getSampleList() {
            const {data: res} = await this.$http.get('admin/get_sample_list', {params: this.queryInfo})
            if (res.code !== 200) return this.$message.error('获取样本点失败')
            this.sampleList = res.data.list
            this.total = res.data.totalCount
        },
        handleSizeChange(newSize) {
            this.queryInfo.limit = newSize
            this.getSampleList()
        },
        handleCurrentChange(newPage) {
            this.queryInfo.page = newPage
            this.getSampleList()
        },
        goBack() {
            this.$router.go(-1)//返回上一层
        },
        //分配社区
        allotCommunity(id) {
            this.allotForm.sample_id = id
            this.allotDialogVisible = true
        },
        //保存分配社区
        saveAllot(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) return this.$message.error('输入不合法')
                const {data: res} = await this.$http.post('admin/save_allot_community', this.allotForm)
                if (res.code !== 200) return this.$message.error(res.data.message)
                this.$message.success('分配成功')
                this.allotDialogVisible = false
                await this.getSampleList();
            })
        },
        //展开表格
        tableExpand(row) {
            if (row.children.length === 0) {
                return this.$message.error('此样本点暂无数据')
            }
            let $table = this.$refs.table;
            this.sampleList.map((item) => {
                if (row.id !== item.id) {
                    $table.toggleRowExpansion(item, false)
                }
            })
            $table.toggleRowExpansion(row)
        },
        async checkImage(id) {
            //结构赋值
            const {data: res} = await this.$http.get('admin/check_img/' + id)
            if (res.code !== 200) return this.$message.error(res.data.message)
            this.imgData = res.data.list
            this.ImgDialogVisible = true
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //s删除样本点
        async delSample(id){
            console.log(id)
            const configResult = await this.$confirm('此操作将永久删除该样本点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            if (configResult !== 'confirm') return this.$message.info('已取消删除')
            const {data: result} = await this.$http.delete('admin/del_sample/' + id)
            if (result.code !== 200) return this.$message.error(result.data.message)
            this.$message.success('删除成功')
            //删除成功后页码改变返还为上一页
            let totalPage = Math.ceil((this.total - 1) / this.queryInfo.limit);
            let currentPage = this.queryInfo.page > totalPage ? totalPage : this.queryInfo.page;
            this.queryInfo.page = this.queryInfo.page < 1 ? 1 : currentPage;

            await this.getSampleList()
        }
    }
}
</script>

<style scoped>
.ivu-mt {
    margin-top: 16px !important;
}

</style>
